/*
 * @Author: xueyp
 * @Date: 2020-06-10 15:44:06
 * @Last Modified by: xueyp
 * @Last Modified time: 2020-06-10 21:33:36
 */
<template>
  <div class="cat" :class="catRestStatus" @click="timeDisplay">
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";

export default {
  data() {
    return {};
  },
  methods: {
    ...mapMutations({
      controlPopover: 'CONTROL_POPOVER'
    }),
    timeDisplay() {
      let status = this.$store.state.popoverShow
      this.controlPopover({'popoverShow': !status})
      
    }
  },
  computed: {
    ...mapState({
      timeState: "timeState",
      catRestStatus: 'catRestStatus'
    }),
  }
};
</script>

<style scoped lang="less">
.cat {
  position: absolute;
  bottom: 2.49rem;
  //   bottom: 3.39rem;
  left: 52%;
  transform: translateX(-50%);
  
}

  .awake {
    width: 4.43rem;
    height: 4rem;
    background: url(../../assets/images/awake.gif) no-repeat;
    background-size: contain;
    background-position: center;
  }
  .sleep {
    width: 5rem;
    height: 4rem;
    background: url(../../assets/images/sleep.gif) no-repeat;
    background-size: contain;
    background-position: center;
  }
  @media screen and(min-width: 320px)and(max-width: 359px){ 
    .awake {
      width: 4.43rem;
      height: 3rem;
    }
    .sleep {
      width: 5rem;
      height: 3rem;
    }
  } 
  // @media screen and(max-width: 374px){ 
  //   .awake {
  //     width: 4.43rem;
  //     height: 3rem;
  //   }
  //   .sleep {
  //     width: 5rem;
  //     height: 3rem;
  //   }
  // }
</style>
